<template>
  <div>
    <!-- 固定钩子   on-preview  处理预览
     on-remove  处理删除图片 on-change  处理添加图片
     class 动态class设置已有图片就不能再上传 -->
    <el-upload
      action="#"
      list-type="picture-card"
      :http-request="upload"
      :on-preview="onPreview"
      :on-remove="onRemove"
      :on-change="onChange"
      :file-list="fileList"
      :class="{disabled: fileList.length > 0}"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 完成浏览 -->
    <el-dialog title="浏览" :visible="isShowPreview" @close="isShowPreview = false">
      <i :src="previewUrl" />
    </el-dialog>
  </div>
</template>

<script>
// npm i cos-js-sdk-v5 --save
const COS = require('cos-js-sdk-v5')
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
const cos = new COS({
  SecretId: 'AKIDZy81zlIacQyGI5ctufBRRBgwylJbdPzJ',
  SecretKey: '5uTmqeCVYLr88rKYXGjwuc4GDuKTLxIM'
})

export default {
  data() {
    return {
      isShowPreview: false,
      previewUrl: '',
      fileList: [
        // 图片数组,每张图片都是一个对象,其中url属性渲染图片
        // { url: 'https://s.cn.bing.net/th?id=OIP.YQPf0wjFkVqS8DDd1WkRNAAAAA&w=197&h=113&c=7&o=6&pid=3.1' }
      ]
    }
  },
  methods: {
    onPreview(file) {
      console.log(file, 'ImageUpload31行')
      this.isShowPreview = true
      this.previewUrl = file.url
    },
    onRemove(file, newFileList) {
      this.fileList = newFileList
    },
    onChange(file, newFileList) {
      this.fileList = newFileList
    },
    beforeUpload(file) {
      console.log(file)
      console.log('上传前校验')

      const maxSize = 1024 * 1024
      if (file.size > maxSize) {
        this.$message.error('图片必须在 1M 之内')
        return false
      }

      const type = ['image/jpeg', 'image/png']
      if (!type.includes(file.type)) {
        this.$message.error('目前只支持 jpeg / png 图片')
        return false
      }
    },
    upload(params) {
    // 替换上传组件默认行为,为后续上传准备
      console.log('真正上传')
      // 解构
      console.log(params.file)
      const { file } = params

      // 腾讯云
      cos.putObject({
        Bucket: 'hr-72-1310482707', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: 'file.name', /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        StorageClass: 'STANDARD',
        Body: file, // 上传文件对象
        onProgress: function(progressData) {
        // 腾讯云配套上传中进度变化钩子
          console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
      // 腾讯云配套上传结束的钩子,如果第一参数err不存在就成功
        if (!err) {
        // 上传成功
          console.log(data)
          this.$message.success('上传成功')
          // element ui 不知道上传完毕,需通知
          // this.file[0].url = 'http://' + data.Location
          // this.fileList[0].staus = 'success'

          // 处理图片上传多张处理
          this.fileList.forEach(img => {
            if (img.uid === file.uid) {
            // 找到文件列表中 uid 跟正在上传图片 uid 相同的改
              img.url = 'http://' + data.Location
              img.status = 'success'
            }
          })
        } else {
        // 上传失败
          console.log(err)
          this.$message.error('上传失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled{
  // /deep/ .el-upload--picture-card {
 ::v-deep .el-upload--picture-card {
    display: none;
  }
}

</style>
